<template>
    <div @click="closeMenu()">
        <nav class="BreadcrumbBlock">
			<div class="flex">
				<div class="BreadItem" @click="$router.push('/myStand')">我的</div>
				<div class="BreadItem"  @click="$router.push('/myStand')">我的规范</div>
				<div class="BreadItem active">编辑规范</div>
			</div>
            <!-- <div class="flex" v-else>
				<div class="BreadItem">品牌规范</div>
				<div class="BreadItem active">{{queryData.name}}</div>
			</div> -->
		</nav>
        <div id="editorStand" class="contentBox flex">
            <aside class="asideContent">
                <header ref="logo" class="relative flex align-center center" @mouseover="upLoadFlag = true" @mouseout="upLoadFlag=false">
                    <img :src="queryData.covar_path" alt="">
                    <label for="upLoadCovar" v-show="upLoadFlag&&queryData.admin_list && queryData.admin_list.indexOf($store.state.userInfo.user_id)!='-1'">
                        <div class="upLoadCovarBox">
                            <!-- <div> -->
                                <i class="el-icon-plus"></i>
                            <!-- </div> -->
                            <div>更换封面</div>
                            <p>建议上传238*180px 带底色图片</p>
                        </div>
                    </label>
                    <input type="file" id="upLoadCovar" class="none" @change='uploadImg($event)'>
                </header>
                <section>
                    <div class="relative">
                        <h4 @contextmenu.prevent='reTitleFlag=true' @dblclick="reTitleFnFlag=true">{{queryData.name}}</h4>
                        <article class="reNameBox" v-show="reTitleFlag&&queryData.admin_list && queryData.admin_list.indexOf($store.state.userInfo.user_id)!='-1'" @click="reTitleFnFlag=true">
                            <div>重命名</div>
                        </article>
                    </div>
                    <div class="detailMenuBox" style="">
                        <SearchTree
                            ref="tree"
                            node-key="id"
                            :data="treeList"
                            :default-expand-all="true"
                            :deepCopy="true"
                            >
                            <template slot-scope="node">
                                <div class="treeNodeBox">
                                    <span @contextmenu.prevent="closeMenu(); node.showMenu = true" @click="changeNode(node)" @dblclick="changeNode(node);reName(node);" :class="{'active':nodeIndex === node.id}">{{node.name}}</span>
                                    <article class="handMenu" v-show="node.showMenu&& queryData.admin_list && queryData.admin_list.indexOf($store.state.userInfo.user_id)!='-1'">
                                        <div @click.prevent="newDir(node,'1');">新建页面</div>
                                        <div @click.prevent="newDir(node,'2');">新建目录</div>
                                        <div @click.prevent="reName(node);">重命名</div>
                                        <div @click.prevent="delNode(node.id)">删除</div>
                                    </article>
                                </div>
                                
                            </template>
                        </SearchTree>
                    </div>
                </section>
                <footer class="flex justify-end align-center footHandle"   v-if="queryData.admin_list&&queryData.admin_list.indexOf($store.state.userInfo.user_id)!='-1'"> 
                    <img src="../../assets/images/front/sort.png" title="编辑排序" v-show="!isEditOrder" @click="handleIsEditOrder()" class="mw-1 pointer" alt="">
                    <button v-show="isEditOrder" @click="handleSaveSort()" class="custom_primary_btn">保存</button>
                    <button v-show="isEditOrder" @click="handleCancelSort()" class="custom_info_btn">取消</button>
                    <img src="../../assets/images/front/icon_add_page.png" title="新建页面" @click="newDir(detailObj,'1',true)" class="mw-1 pointer" alt="">
                    <img src="../../assets/images/front/icon_add_content.png" title="新建目录" @click="newDir(detailObj,'2',true)" class="mw-1 pointer" alt="">
                </footer>
            </aside>
            <main class="flex-1" v-show='nodeIndex!=-1'>
                <article>
                    <quill-editor class="ql-editor" v-model="detailObj.description" v-show="editorDetailFlag" ref="myQuillEditor"  :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor>
                    <section v-show="!editorDetailFlag" class="contentDescrBox">
                        <!--<h1 class="contentDescrTitle" v-if="queryData.admin_list&&queryData.admin_list.indexOf($store.state.userInfo.user_id)!='-1'">概览</h1>-->
                        <div class="contentDescrData" v-html='detailObj.description ? detailObj.description : "暂无内容"'></div>
                        <p class="contentDescrTime">最后一次由 {{detailObj.user_name}} 在 {{detailObj.create_time}} 更新</p>
                    </section>
                </article>
                <footer class="flex align-center justify-end"  v-if="queryData.admin_list&&queryData.admin_list.indexOf($store.state.userInfo.user_id)!='-1'">
                    <template v-if="editorDetailFlag">
                        <button class="primaryBtn" @click="saveDescr();">保存</button>
                        <button class="primaryBtn" @click="publish()">发布</button>
                        <button class="infoBtn" @click="editorDetailFlag=!editorDetailFlag">取消</button>
                    </template>
                    <button v-else class="primaryBtn" @click="editorDetailFlag=!editorDetailFlag">编辑</button>
                </footer>
            </main>
        </div>

        <el-dialog
            title="标题重命名"
            :visible.sync="reTitleFnFlag"
            width="420px">
            <div class="dialog_title relative flex align-center justify-between">
              <div class="">标题重命名</div>
              <i class="el-icon-close pointer" @click="reTitleFnFlag=false"></i>
            </div>
            <el-form label-position='left'>
                <el-form-item label="输入新名称" label-width="90px">
                    <el-input v-model="queryData.name" autocomplete="off" @keyup.enter.native="saveReTitle()" size='small' placeholder="请输入新名称"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <button class="custom_primary_btn" @click="saveReTitle()">确定</button>
            </span>
        </el-dialog>

        <el-dialog
            title="新建目录"
            :visible.sync="newDirFlag"
            width="420px">
            <div class="dialog_title relative flex align-center justify-between">
              <div class="">新建目录</div>
              <i class="el-icon-close pointer" @click="newDirFlag=false"></i>
            </div>

            <!-- <span>目录名称</span>
            <div class="mh-1">
                <el-input autocomplete="off" v-model="newDirObj.name"></el-input>
            </div> -->
            <el-form label-position='left'>
                <el-form-item label="目录名称" label-width="76px">
                    <el-input v-model="newDirObj.name" autocomplete="off" size='small' @keyup.enter.native="saveDir()" placeholder='请输入目录名称'></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <button class="custom_primary_btn" @click="saveDir();">确定</button>
            </span>
        </el-dialog>

        <el-dialog
            title="新建页面"
            :visible.sync="newPageFlag"
            width="420px">
            <div class="dialog_title relative flex align-center justify-between">
              <div class="">新建页面</div>
              <i class="el-icon-close pointer" @click="newPageFlag=false"></i>
            </div>
            <el-form label-position='left'>
                <el-form-item label="页面名称" label-width="76px">
                    <el-input v-model="newDirObj.name" autocomplete="off" size='small' @keyup.enter.native="saveDir()" placeholder='请输入页面名称'></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <button class="custom_primary_btn" @click="saveDir();">确定</button>
            </span>
        </el-dialog>

        <el-dialog
            title="重命名"
            :visible.sync="reNameFlag"
            width="420px">
            <div class="dialog_title relative flex align-center justify-between">
              <div class="">重命名</div>
              <i class="el-icon-close pointer" @click="reNameFlag=false"></i>
            </div>
            <el-form label-position='left'>
                <el-form-item label="输入新名称" label-width="90px">
                    <el-input v-model="reNameObj.name" autocomplete="off" size='small' @keyup.enter.native="saveReName()" placeholder="请输入新名称"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <button class="custom_primary_btn" @click="saveReName()">确定</button>
            </span>
        </el-dialog>

        <el-dialog title="" :visible.sync="dialogDelVisible" width='536px'>
            <div class="dialog_title relative flex align-center justify-between">
                <div class="">是否彻底删除此文件吗？</div>
                <!-- <i class="el-icon-close pointer" @click="dialogDesignVisible=false"></i> -->
            </div>
            <p class="del_text">
                文件删除后，信息不可恢复<br/>
            </p>
            <div slot="footer" class="dialog-footer">
                <button class="custom_primary_btn" @click="delApi()">删除</button>
                <button class="custom_info_btn" @click="dialogDelVisible = false">取消</button>
            </div>
        </el-dialog>

        <div class="toastBox" v-show="toastFlag">{{toastMsg}}</div>
    </div>
</template>
<script>
import {formatData} from '@/utils/index.js'
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import { addQuillTitle } from '@/utils/quill-title.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Sortable from 'sortablejs'
export default {
    name:'standardContent',
    components: {
        quillEditor,
    },

    data(){
        return{
            treeList: [
                {
                    "id": 1007,
                    "name": "山东省",
                    "flag":false,
                    "children": [
                        {
                            "id": 1103,
                            "name": "济南市",
                            "flag":false,
                            "children": [
                                {
                                    "id": 2544,
                                    "name": "济南市无影山西路店",
                                    "flag":false,
                                }, 
                                {
                                    "id": 2545,
                                    "name": "济南市堤口路店",
                                    "flag":false,
                                }
                            ]
                        }, 
                        {
                            "id": 1105,
                            "name": "沂市",
                            "flag":false,
                            "children": [
                                
                                {
                                    "id": 2561,
                                    "name": "沂市东岳庙店",
                                    "flag":false,
                                }
                            ]
                        },
                        {
                            "id": 1106,
                            "name": "沂市11",
                            "flag":false
                        }
                    ]
                }
            ],
            detailObj:{},
            newDirObj:{ //增删改节点对象
                id:"",
                standard_id:null,
                name:"",
                parent_id:"",
                user_id:"",
                user_name:"",
                description:""
            },
            reNameObj:{
                id:'',
                name:""
            },
            editorOption:{
                placeholder: "输入正文",
            },
            editorDetailFlag:false, //编辑flag
            nodeIndex:-1, //选中tree节点
            newDirFlag:false,
            newPageFlag:false,
            reNameFlag:false,
            reTitleFlag:false,//标题重命名
            reTitleFnFlag:false,
            queryData:{},
            toastFlag:false,
            toastMsg:'',
            dialogDelVisible:false, //删除弹窗
            delId:'', //删除id
            upLoadFlag:false,
            // standard_id:'',
            // standard_name:'',
            // status:'',
            // covar_path:"",
            sortable:null, //拖动对象
            sortData:[],
            isEditOrder:false
        }
    },
    async mounted(){
        addQuillTitle();
        await this.getStandardData(this.$route.query.id);
        // this.queryData = this.$route.query
        this.newDirObj.standard_id = this.$route.query.id
        this.newDirObj.user_id = this.$store.state.userInfo.user_id
        this.newDirObj.user_name = this.$store.state.userInfo.user_name
        this.getTreeData();
        // addQuillTitle();
    },

    methods: {
        getStandardData(id){ //获取规范详情
            let that = this;
            this.$axios.get('/api/standard/data',{
                params:{
                    id,
                }
            }).then((res)=>{
                if(res.data.code == 200){
                    console.log('aaaa')
                    that.queryData = res.data.data
                }
            })
        },
        getTreeData(){
            let that = this;
            that.treeList = []
            this.$axios.get('/api/standard/details',{
                params:{
                    standard_id:that.$route.query.id,
                    // user_id:1
                }
            }).then((res)=>{
                if(res.data.data && res.data.data.length>0){
                    that.treeList = that.filterTreeData(res.data.data);
                    that.initSortable()
                }
                
            })
        },
        filterTreeData(data){
            let that = this;
            let arr = []
            data.forEach((item,index)=>{
                if(item.type ==1){
                    if(!item.children||item.children.length<1){
                        item.children = [{}]
                    }else{
                        that.filterTreeData(item.children)
                    }
                }else{
                    if(item.children){
                        that.filterTreeData(item.children)
                    }
                }
                arr.push(item)
            })
            return arr
        },
        onEditorReady(editor) {
            // 准备编辑器
        },
        onEditorBlur() {}, // 失去焦点事件
        onEditorFocus() {}, // 获得焦点事件
        onEditorChange() {}, // 内容改变事件
        
        handleClose(){ //关闭弹窗
        },
        initSortable () {
            var that = this;
            this.sortData = [...this.treeList];
            const el = document.querySelector('.ldq-tree')
            //创建拖拽对象
            this.sortable = Sortable.create(el, {
                sort: that.isEditOrder, //是否可进行拖拽排序
                animation: 150,
                //拖拽完成，移除拖拽之前的位置上的元素，在拖拽之后的位置上添加拖拽元素
                onEnd: ({newIndex, oldIndex}) => {
                    const val = that.sortData[oldIndex]
                    that.sortData.splice(oldIndex, 1)
                    that.sortData.splice(newIndex, 0, val)
                }
            })

        },
        // 编辑展示顺序
        handleIsEditOrder () {
            this.isEditOrder = true
            this.sortable.options.sort = true
        },
        handleSaveSort(){   //保存编辑顺序
            let that = this;
            let ids = that.sortData.map((element)=>{
                return element.id
            })
            this.isEditOrder = false
            this.sortable.options.sort = false
            this.$axios.post('/api/standard/details/sort',{standard_id:that.$route.query.id,ids:ids}).then(res=>{
                that.toastFlag = true;
                that.toastMsg = res.data.message;
                setTimeout(function(){
                    that.toastFlag = false;
                },1000)
            })
        },
        // 取消拖拽顺序
        handleCancelSort () {
            var that = this;
            // 使table先隐藏，再显示，table将恢复拖拽之前的样式
            this.isShowTable = false
            setTimeout(() => {
                that.isShowTable = true
                that.getTreeData()
                // 必须延时，否则重新初始化的sortable无法拖拽
                setTimeout(() => {
                    that.isEditOrder = false
                    that.sortable.options.sort = false
                    that.initSortable()
                }, 200)
            }, 100)
        },
        uploadImg(e){	//上传图片
			let that = this;
            that.upLoadFlag = false;
			let file = e.target.files[0];
			let fileName = file.name;
			let data = new FormData()
			data.append('coverImg', fileName)
			data.append('img', file)
			this.$axios.post('/api/uploadFile',data).then((res)=>{
				if(res.data.code == 200){
					that.queryData.covar_path = res.data.src
					that.$set(that.queryData,that.queryData.covar_path,res.data.src);
					// let img = new Image()
					// img.src = res.data.src;
					// img.onload = function(){
					// 	let width = img.width
					// 	let height = img.height
					// 	if(width!=238 || height!= 180){
					// 		that.toastFlag = true;
					// 		that.toastMsg = '请按规定尺寸上传'
					// 		setTimeout(function(){
					// 			that.toastFlag = false;
					// 			that.standardObj.covar_path = ''
					// 		},2000)
					// 	}
					// }

                    that.$axios.post('/api/standard/update_covar',{
                        id:that.queryData.id,
                        covar_path:that.queryData.covar_path
                    }).then((res)=>{
                        that.getStandardData(that.queryData.id)
                        that.toastFlag = true;
                        that.toastMsg = res.data.message;
                        setTimeout(function(){
                            that.toastFlag = false;
                        },1000)
                    })
					
				}
			})
		},
        saveReTitle(){
            let that = this;
            that.reTitleFnFlag = false;
            this.$axios.post('/api/standard/update_name',{id:that.queryData.id,name:that.queryData.name}).then((res)=>{
                that.toastFlag = true;
                that.toastMsg = res.data.message;
                setTimeout(function(){
                    that.toastFlag = false;
                },1000)
            })
        },
        treeMenuClose(arr){
            let that = this;
            arr.forEach(element => {
                element.showMenu = false;
                if(element.children.length>0){
                    that.treeMenuClose(element.children)
                } 
            });
        },
        closeMenu(){   //关闭右键菜单
            this.treeMenuClose(this.treeList);
            this.reTitleFlag = false;
        },
        changeNode(node){ //点击树节点
            this.editorDetailFlag = false;
            // if(node.children.length<1 || !node.children){
                this.nodeIndex = node.id;
                this.detailObj = node;
                this.detailObj.create_time = formatData(this.detailObj.create_time)
            // }
        },
        newDir(node,type,glo=null){ //新增目录节点
            if(type==='2') this.newDirFlag=true;
            else this.newPageFlag=true;
            this.newDirObj['id'] = '';
            this.newDirObj['name'] = '';
            if(glo){
                this.newDirObj['parent_id'] = node.parent_id
            }else{
                this.newDirObj['parent_id'] = node.id ? node.id : '0'
            }
            this.newDirObj['description'] = '';
            this.newDirObj['type'] = type;
        },
        saveDir(){ //保存新增节点
            let that = this;
            this.newDirFlag = false;
            this.newPageFlag = false;
            if(!this.newDirObj.name) return;
            this.$axios.post('/api/standard/details/addNode',this.newDirObj).then((res)=>{
                that.getTreeData();
                that.toastFlag = true;
                that.toastMsg = res.data.message
                setTimeout(function(){
                    that.toastFlag = false;
                },1000)
                
            })
        },
        reName(node){ //重命名
            this.reNameFlag=true;
            this.reNameObj['id'] = node.id;
            this.reNameObj['name'] = node.name;
        },
        saveReName(){   //保存重命名
            let that = this;
            this.reNameFlag = false;
            this.$axios.post('/api/standard/details/updateNode',{
                id:that.reNameObj.id,
                name:that.reNameObj.name
            }).then((res)=>{
                that.toastFlag = true;
                that.toastMsg = res.data.message
                setTimeout(function(){
                    that.toastFlag = false;
                },1000)
               that.getTreeData();
            })
        },
        delNode(id){ //删除节点操作
            let that = this;
            that.delId = id;
            that.dialogDelVisible = true;
        },
        delApi(){ //删除节点请求
            let that = this;
            that.$axios.post('/api/standard/details/deleteNode',{
                id:that.delId
            }).then((res)=>{
                that.dialogDelVisible = false;
                that.toastFlag = true;
                that.toastMsg = res.data.message || '删除成功'
                setTimeout(function(){
                    that.toastFlag = false;
                },1000)
                that.getTreeData();
            })
        },
        saveDescr(){    //保存详情内容
            let that = this;
            this.editorDetailFlag = !this.editorDetailFlag;
            this.$axios.post('/api/standard/details/updateDetail',{
                id:that.detailObj.id,
                description:that.detailObj.description,
                user_name:that.detailObj.user_name,
                user_id:that.detailObj.user_id
            }).then((res)=>{
                that.toastFlag = true;
                that.toastMsg = res.data.message
                setTimeout(function(){
                    that.toastFlag = false;
                },1000)
                that.getTreeData();
            })
        },
        publish(){  //发布
            let that = this;
            this.$axios.post('/api/standard/update_status',{standard_id:that.detailObj.standard_id,status:1}).then((res)=>{
                that.toastFlag = true;
                that.toastMsg = res.data.message
                setTimeout(function(){
                    that.toastFlag = false;
                },1000)
                that.editorDetailFlag = false
            })

        },
        handleRemove (data) { // 删除节点
            this.$refs.tree.remove(data.id)
        },
        handleAppend (data) { // 添加子节点
            this.$refs.tree.append(data.id, { id: Date.now(), name: '新节点' })
        },
        handleAppendRoot () { // 添加根节点
            this.$refs.tree.append(null, { id: Date.now(), name: '新节点' })
        }
    },
}
</script>
<style scoped lang='less'>

/deep/ .el-dialog{
    padding: 28px !important;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto 50px !important;
}
/deep/ .el-dialog__header{
    display: none !important;
}
/deep/ .el-dialog__body{
    padding: 0 !important;
    .el-input__inner{
        border-radius: 30px;
    }
}
.dialog_title{
    font-size: 20px;
    color: #000000;
    letter-spacing: 0;
    line-height: 16px;
    opacity: 0.95;
    font-weight: 500;
    margin-bottom: 20px;
    i{
    color: #E3E3E3;
    }
}
/deep/ .el-dialog__footer{
    padding: 0;
    margin-top: 20px;

}


.menuBox{
    cursor: pointer;
}
.menuList{
    margin-left: 40px;
    /deep/ .el-collapse-item__arrow{
        margin: 0 0 0 auto;
    }
}
.subMenuList{
    margin-left: 22px;
}
/deep/ .tree-li{
    overflow: visible !important;
}
.tree-li{
    overflow: visible !important;
}
/deep/ .ldq-tree{
    margin-top: 20px;
}
/deep/ .tree-triangle{
    border-top: 8px solid #c0c4cc !important;
    border-right: 6px solid transparent !important;
    border-left: 6px solid transparent !important;
}
.tree-triangle{
    border-top: 8px solid #c0c4cc !important;
    border-right: 6px solid transparent !important;
    border-left: 6px solid transparent !important;
}
/deep/ .tree-content{
    margin: 0 0 0 7px !important;
}
.tree-content{
    margin: 0 0 0 7px !important;
}
.treeNodeBox{
    line-height: 30px;
    position: relative;
    span.active{
        color: #0064FF;
        margin-bottom: 3px;
        display: inline-block;
        line-height: 22px;
        border-bottom: 2px solid #0064ff;
    }
    .handMenu{
        right: 9px;
        top: 7px;
        line-height: 25px;
        position: absolute;
        width: 102px;
        border: 1px solid #ddd;
        background: #fff;
        z-index: 2;
        div{
            padding: 2px 15px;
            cursor: pointer;
            font-size: 14px;
        }
        div:hover{
            background: #F4F5F8;
        }
    }

}
.cosTitle {
    margin-left: -16px;
}
.reNameBox{
    position: absolute;
    top: 0;
    right: 24px;
    width: 100px;
    height: 28px;
    border: 1px solid #ddd;
    padding: 4px 12px;
    cursor: pointer;
    background: #fff;
    box-sizing: border-box;
    font-size: 14px;
}
.reNameBox:hover{
    background:#F4F5F8 ;
}



.nodeRightMenu{
    left: 0px;
    position: absolute;
    width: 140px;
    height: 153px;
    box-shadow: 0 0 5px #ddd;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    z-index: 2;
    border: 1px solid #ddd;
    padding-left: 15px;
}
    #editorStand{
        height: 1317px;
        padding: 0;
        .asideContent{
            width: 270px;
            height: 100%;
            position: relative;
            border-right: 1px solid #E3E3E3;
            header{
                height: 194px;
                justify-content: center;
                border-bottom: 1px solid #E3E3E3;
                img{
                    max-width: 90%;
                    max-height: 80%;
                }
                .upLoadCovarBox{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.50);
                    color: #fff;
                    cursor: pointer;
                   
                    i{
                        margin-top: 72px;
                        font-size: 22px;
                    }
                    div{
                        font-size: 16px;
                        margin-top: 8px;
                    }
                    p{
                        margin-top: 39px;
                        font-size: 14px;
                        color: #FFFFFF;
                        opacity: .8;
                    }
                }
            }

            section{
                padding-top: 60px;
                margin-left: 30px;
                height: 1028px;
                h4{
                    font-size: 20px;
                    color: #000000;
                    letter-spacing: 0;
                    line-height: 30px;
                    font-weight: 400;
                }
                .detailMenuBox{
                    height:calc(100% - 90px);
                    overflow-y:auto;
                }
                .detailMenuBox::-webkit-scrollbar { width: 10px !important }
                .detailMenuBox::-webkit-scrollbar { 
                    width: 10px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
                    background: #fff;
                }
                /*定义滚动条轨道（凹槽）样式*/ 
                .detailMenuBox::-webkit-scrollbar-track { 
                    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
                    border-radius: 5px; 
                } 
                    /*定义滑块 样式*/ 
                .detailMenuBox::-webkit-scrollbar-thumb { 
                    border-radius: 5px; 
                    height: 100px;    /* 滚动条滑块长度 */
                    background-color: #95A5B6;
                }
                menu{
                    margin-top: 20px;
                    // /deep/ .el-tree-node__content:hover{
                    //     background-color:#fff;
                    //     color: #0064FF;
                    // }
                }
            }
            footer.footHandle{
                height: 88px;
                position: absolute;
                width: 100%;
                bottom: 0;
                left: 0;
                border-top: 1px solid #E3E3E3;
                button{
                    width: 70px;
                    min-width: 70px;
                    height: 32px;
                    font-size: 14px;
                }
            }
        }
        main{
            position: relative;
            height: 100%;
            article{
                padding: 100px 100px 20px;
                height: calc(100% - 90px);
                overflow: auto;
                box-sizing: border-box;
            }
            /deep/ .ql-toolbar.ql-snow{
                border: none;
                border-bottom: 1px solid #ccc;
            }
            /deep/ .ql-container.ql-snow{
                border: none;
                height: calc(100% - 60px);
            }
            .contentDescrBox{
                height: 100%;
                overflow: auto;
                .contentDescrTitle{
                    font-size: 28px;
                    letter-spacing: 3px;
                    font-weight: 500;
                    margin-bottom: 50px;
                    line-height: 50px;
                    border-bottom: 1px solid #ddd;
                }
                .contentDescrData{
                    font-size: 17px;
                }
                .contentDescrTime{
                    margin-top: 30px;
                    color: #ddd;
                    font-size: 16px;
                }
            }
            
            footer{
                position: absolute;
                width: 100%;
                height: 89px;
                border-top: 1px solid #E3E3E3;
                left: 0;
                bottom: 0;
                padding-right: 80px;
                box-sizing: border-box;
                button{
                    width: 104px;
                    height: 50px;
                    border-radius: 25px;
                    font-weight: 400;
                    font-size: 20px;
                    color: #FFFFFF;
                    letter-spacing: 0;
                    cursor: pointer;
                    border: none;
                    outline: none;
                    margin-left: 12px;
                }
                .primaryBtn{
                    background: #0064FF;
                }
                .infoBtn{
                    background: #666666;
                }
            }
        }
    }



/deep/ .ql-snow .ql-tooltip[data-mode=link]::before {
  content: "请输入链接地址:";
}
/deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
}

/deep/ .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: '10px';
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: '18px';
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: '32px';
}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: '标题1';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: '标题2';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: '标题3';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: '标题4';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: '标题5';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: '标题6';
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: '衬线字体';
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: '等宽字体';
}
</style>
